<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            width: 400px;
            height: 300px;
            margin:  0 auto;
            border: 1px solid red;
            position: relative;
        }
        .wrap img{
            width: 400px;
            height: 300px;
        }
        span{
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: pink;
            border-radius: 50%;
        }
        p{
            width: 100%;
            position: absolute;
            bottom: 20px;
            text-align: center;
        }
        .active{
            background-color: blue;
        }
        button{
            position: absolute;
            width: 50px;
            height: 100px;
            top: 50%;
            transform: translateY(-50%);
        }
        .wrap button:nth-of-type(1){
            left: 0;
        }
        .wrap button:nth-of-type(2){
            right: 0;  
        }
    </style>
</head>
<body>
    <div class="wrap">
        <img src="./img/1.jpg" alt="">
        <p>
            <span index="0" class="active"></span>
            <span index="1"></span>
            <span index="2"></span>
            <span index="3"></span>
        </p>
        <button>&lt;</button>
        <button>&gt;</button>
       
    </div>

    <script>
        // 1、获取元素
        var oImg = document.querySelector("img");
        var oSpan = document.querySelectorAll('span');

        // 声明变量:存储下标值
        var n = 0;

        // 案例： 图片路径通过数组进行存储
        var arr = ['./img/1.jpg','./img/2.jpg','./img/3.jpg','./img/4.jpg'];//length = 4

        // arr[0]


        // 2、加事件  小圆点加点击事件
        for(var i=0;i<oSpan.length;i++){
            // 自定义索引 ---保留for循环的下标
            oSpan[i].index = i;
            oSpan[i].onclick = function(){
                // 3、做什么事 -- 切换到对应的图片  --改变小圆点的颜色
               
                // 在设置小圆点的颜色的时候要先清空已经设置好的颜色
                // 把所有小圆点的颜色回归到本来的颜色
                for(var j=0;j<oSpan.length;j++){
                    // oSpan[j].style.backgroundColor = 'pink';
                    oSpan[j].className = '';
                }


                oImg.src = arr[this.index];
                // this.style.backgroundColor = "blue";
                this.className = 'active';
                
                n = this.index;
            }
        }


        // 右按钮 需求： 点击，让图片向下切换，改变小圆点的高亮
        // 1、获取元素
        var oBtn = document.querySelectorAll('button');

        

        // 2、加事件 
        oBtn[1].onclick = function(){
            // 3、做什么事

            n++;// n=n+1
            if(n>arr.length-1){
                n=0;
            }

            //图片的路径 arr[n]
            oImg.src = arr[n];

            // 清空小圆点样式
            for(var i=0;i<oSpan.length;i++){
                oSpan[i].className = "";
            }

            // 改变小圆点
            oSpan[n].className = "active";
            console.log(n);
        }
    </script>
</body>
</html>